<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>打印插件</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=311"/>
    <style>
        .print-table {
            border: none;
            border-collapse: collapse;
            width: 100%;
        }

        .print-table td, .print-table th {
            color: #333;
            padding: 9px 15px;
            word-break: break-all;
            border: 1px solid #666;
        }
    </style>
</head>
<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body text-center">
            <br><br>
            <button id="btnPrint1" class="layui-btn">竖屏打印</button>
            <button id="btnPrint2" class="layui-btn">横屏打印</button>
            <br><br>
            <button id="btnPrint3" class="layui-btn">打印自定义内容</button>
            <button id="btnPrint4" class="layui-btn">分页打印</button>
            <br><br>
            <br><br>
            <div class="hide-print">
                此段内容会在打印时自动隐藏。
            </div>
            <br><br>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=311"></script>
<script>
    layui.use(['layer', 'printer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var printer = layui.printer;

        // 打印当前页面
        $('#btnPrint1').click(function () {
            printer.print();
        });
        $('#btnPrint2').click(function () {
            printer.print({
                horizontal: true  // 横向打印
            });
        });

        // 打印任意html字符串
        $('#btnPrint3').click(function () {
            var htmlStr = printer.makeHtml({
                style: '<style>*{color: red;text-align: center;}</style>',
                body: 'Hello Word !'
            });
            printer.printHtml({
                html: htmlStr,
                horizontal: true,  // 横向打印
                close: false  // 自动关闭打印窗口
            });
        });

        // 分页打印
        $('#btnPrint4').click(function () {
            printer.printPage({
                htmls: [
                    '<div>我是第一页</div>',
                    '<div>我是第二页</div>',
                    '<div>我是第三页</div>',
                    '<div>我是第四页</div>',
                    '<div>我是第五页</div>'
                ],
                style: '<style>*{color: red;}</style>',  // 页面样式
                horizontal: true,  // 是否横向
                padding: undefined, // 页边距
                debug: true,  // 调试模式
                close: false  // 自动关闭打印窗口
            });
        });

    });
</script>
</body>
</html>